{/*

    ==主要内容Tabs选项卡==
    封装为Vue组件,方便分开页面编写

*/}
<style>
    .vue--tab-label{
        padding: 0 5px;
        line-height: 30px
    }
    .vue--tab-label .vue--tab-label-text{
        position: relative;
        margin-left: 5px
    }
    .vue--tab-label .el-icon{
        position: relative;
        top: 2px;
    }
    .vue--tab-home{
        margin: 0 15px;
    }
    .el-tabs__item{
        padding: 0 5px 0 0;
        margin: 0 5px 0 0;
    }
    .el-tabs__item.is-active{
        background: linear-gradient(to top, #eeee 0, #fff 15px, transparent 15px);
    }
    .vue--tab-iframe{
        width: 100%;
        border: none;
        height: calc(100vh - 99px);
    }
    .el-tabs__header{
        margin: 0 0 6px 0;
    }
</style>

<script type="text/html" id="vue--main-tabs">
    <el-tabs v-model="activeTab" @tab-remove="remove">
        <el-tab-pane name="home">
            <template #label>
                <div class="vue--tab-label">
                    <div class="vue--tab-home">
                        <el-icon ><HomeFilled/></el-icon>
                        <span class="vue--tab-label-text" >首页</span>
                    </div>
                </div>
            </template>
            <iframe src="<?= \App\Common\Util\TP::route()->toAllowMiss([\App\Admin\Controller\Base\IndexController::class, 'home'])  ?>" ref="tab-home" class="vue--tab-iframe"></iframe>
        </el-tab-pane>
        <el-tab-pane v-for="tab in tabs" closable  :name="tab.index">
            <template #label>
               <div class="vue--tab-label">
                   <el-icon v-if="tab.icon"><component :is="tab.icon"></component></el-icon>
                   <span v-if="tab.icon" class="vue--tab-label-text" >{{ tab.title }}</span>
                   <span v-else >{{ tab.title }}</span>
               </div>
            </template>
            <iframe :src="tab.route" :ref="'IF-ref-' + tab.index" class="vue--tab-iframe" frameborder="0"></iframe>
        </el-tab-pane>
    </el-tabs>
</script>


<script>
    VueInit.components.MainTabs = {
        template:document.getElementById('vue--main-tabs').innerHTML,
        data(){
            return {
                activeTab: 'home',
                tabs:[]
            }
        },
        methods:{
            add(v){
                let add = true;
                this.tabs.map(v1 => {
                    if(v1.route.replace(/\?global_search=.*$/, '') === v.route.replace(/\?global_search=.*$/, '')){
                        add = false;
                    }
                });
                if(add){
                    v.closable = true;
                    this.tabs.push(v);
                }

                this.activeTab = v.index;

                if(!add && /\?global_search=.*$/.test(v.route)){
                    this.$refs['IF-ref-' + v.index][0].contentDocument.location.search = v.route.match(/\?global_search=.*$/)[0];
                }

            },
            remove(v){
                let index = -1;
                for (const tIndex in this.tabs) {
                    if (v.toString() === this.tabs[tIndex].index.toString()) {
                        index = tIndex;
                        break;
                    }
                }

                if (index !== -1) {
                    if (this.tabs[index].index.toString() === this.activeTab.toString()) {
                        this.activeTab = index > 0 ? this.tabs[index - 1].index : 'home';
                    }
                    this.tabs.splice(index, 1);
                }
            }
        }
    };


</script>